<%= javascript_include_tag "foremCreatorSignup", defer: true %>
<style>
  #page-content {
    display: flex;
    flex-direction: column;
  }

  #page-content-inner {
    display: flex;
    flex: 1;
    background: white;
  }
</style>
<main id="main-content" class="flex flex-1 justify-center flex-col crayons-layout crayons-layout--limited-xs">
  <div class="relative z-elevate p-4">
    <% if flash[:notice] %>
      <div class="crayons-notice crayons-notice--danger mb-6" role="alert">
        <%= flash[:notice] %>
      </div>
    <% end %>

    <% any_errors = local_assigns[:resource]&.errors&.any? %>

    <%= form_for(@user, as: :user, data: { testid: "creator-signup-form" }, url: registration_path(:user)) do |f| %>
      <% if any_errors %>
        <div class="crayons-card crayons-card--secondary crayons-notice crayons-notice--danger my-8" role="alert" data-testid="signup-errors">
          <div class="crayons-card__header">
            <h3 class="crayons-card__headline">
              <%= t("views.auth.register.errors", count: resource.errors.size) %>
            </h3>
          </div>
          <div class="crayons-card__body">
            <ul>
              <% resource.errors.full_messages.each do |message| %>
                <li><%= message %></li>
              <% end %>
            </ul>
          </div>
        </div>
      <% end %>

      <div class="align-center">
        <p class="pb-4 fs-2xl m:fs-3xl lh-tight fw-bold"><%= t("views.auth.creator.text1") %></p>
        <p class="color-base-70 fs-l m:fs-xl"><%= t("views.auth.creator.text2") %></p>
        <p class="color-base-70 fs-l m:fs-xl"><%= t("views.auth.creator.text3") %></p>
      </div>

      <div class="crayons-field mt-6">
        <%= f.label :name, t("views.auth.register.field.name.label"), for: "name", class: "crayons-field__label" %>
        <%= f.text_field :name, id: "name", placeholder: "John Doe", class: "crayons-textfield js-creator-signup-name", required: true %>

        <div class="js-creator-signup-username-hint-row hidden">
          <div class="fs-xs color-base-60 flex">
            <%= t("views.auth.creator.hint.text_html", start: tag("span", nil, true), end: "</span>".html_safe,
                                                       button: tag.button(
                                                         tag.span(class: "js-creator-signup-username-hint") + crayons_icon_tag(:pencil, class: "cursor-pointer opacity-75 ml-1", aria_hidden: true, title: t("views.auth.creator.hint.icon")),
                                                         class: "cursor-pointer border-none bg-transparent p-0 js-creator-edit-username flex color-base-90",
                                                         role: "button", type: "button",
                                                         aria: { label: t("views.auth.creator.hint.aria_label") }
                                                       )) %>
          </div>
          </div>
      </div>

      <div class="crayons-field mt-6 <%= "hidden" unless any_errors %> js-creator-signup-username-row">
        <%= f.label :username, t("views.auth.register.field.username.label"), for: "username", class: "crayons-field__label" %>
        <%= f.text_field :username, pattern: "[A-Za-z0-9_]+", maxlength: "30", title: t("views.auth.register.field.username.desc"), id: "username", class: "js-creator-signup-username crayons-textfield",
                                    aria: { describedby: "username-helper-text" } %>
        <p id="username-helper-text" class="fs-xs color-base-60 mt-1"><%= t("views.auth.register.field.username.desc") %></p>
      </div>

      <div class="crayons-field mt-6">
        <%= f.label :email, t("views.auth.register.field.email.label"), for: "email", class: "crayons-field__label" %>
        <%= f.email_field :email, placeholder: t("views.auth.register.field.email.placeholder"), autocomplete: "email", id: "email", class: "crayons-textfield", required: true %>
      </div>

      <div class="crayons-field mt-6">
        <%= f.label :password, t("views.auth.register.field.password.label"), class: "crayons-field__label" %>
        <div class="relative js-password-toggle-wrapper">
          <%= f.password_field :password, minlength: "8", class: "crayons-textfield js-password", placeholder: t("views.auth.register.field.password.placeholder"), required: true, aria: { describedby: "password-helper-text" } %>
          <button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--s js-creator-password-visibility h-100 absolute z-elevate right-0" aria-label="<%= t("views.auth.register.field.password.show") %>" aria-pressed="false">
            <%= crayons_icon_tag(:eye, class: "js-eye", data: { testid: "mask-icon" }, aria_hidden: true, title: t("views.auth.register.field.password.show")) %>
            <%= crayons_icon_tag("eye-off", class: "hidden js-eye-off", data: { testid: "unmask-icon" }, aria_hidden: true, title: t("views.auth.register.field.password.hide")) %>
          </button>
        </div>
        <p id="password-helper-text" class="fs-xs color-base-60 mt-1"><%= t("views.auth.register.field.password.desc") %></p>
      </div>

      <% if ForemInstance.needs_owner_secret? %>
        <% if params[:forem_owner_secret].present? %>
          <%= f.hidden_field :forem_owner_secret, value: params[:forem_owner_secret] %>
        <% else %>
          <div class="crayons-field mt-6">
            <%= f.label :forem_owner_secret, t("views.auth.register.secret.label"), class: "crayons-field__label" %>
            <div class="relative js-password-toggle-wrapper">
              <%= f.password_field :forem_owner_secret, class: "crayons-textfield js-password", required: ForemInstance.needs_owner_secret?, placeholder: t("views.auth.register.secret.placeholder") %>
              <button type="button" class="crayons-btn crayons-btn--ghost crayons-btn--s js-creator-password-visibility h-100 absolute z-elevate right-0" aria-label="<%= t("views.auth.register.secret.show") %>" aria-pressed="false">
                <%= crayons_icon_tag(:eye, class: "js-eye", data: { testid: "mask-icon" }, aria_hidden: true, title: t("views.auth.register.secret.show")) %>
                <%= crayons_icon_tag("eye-off", class: "hidden js-eye-off", data: { testid: "unmask-icon" }, aria_hidden: true, title: t("views.auth.register.secret.hide")) %>
              </button>
            </div>
          </div>
        <% end %>
      <% end %>

      <div class="flex flex-col pt-6">
        <%= f.submit t("views.auth.creator.submit"), class: "crayons-btn" %>
      </div>
    <% end %>
  </div>
  <%= crayons_icon_tag("forem-background", class: "forem-background absolute bottom-0 right-0 hidden m:block", title: t("views.auth.background")) %>
</main>
